﻿@import "_reset.less";

html, body {
  width: 100%;
  height: 100%;
  font-family: "微软雅黑";
  background-color: #000;
}

img{
  outline: none;
}

body.sbg {
  background-image: url("../img/preload/bg1.jpg");
  background-size: cover;
}

.hide {
  display: none;
}

#main {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  #main-swiper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    .swiper-wrapper {
      .swiper-slide {
        width: 100%;
        height: 100%;
        &.swiper-slide-active {
        }
      }
    }
    .arrow {
      width: .31rem;
      height: .36rem;
      background: url("../img/preload/arrow.png");
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      bottom: .35rem;
      margin-left: -0.165rem;
      z-index: 100;
      .animation(pull_down 1.1s infinite linear);
    }
    .sp2{
      .arrow{
        bottom: .25rem;
        background: none;
        .animation(none);
      }
      &.active{
        .arrowsp2{
          .animation(fadeInUp .75s .72s both);
        }
        .arrow{
          .animation(pull_down 1.1s infinite linear);
        }
      }
    }
    .arrowRight {
      width: .30rem;
      height: .53rem;
      background: url("../img/preload/arrowRight.png");
      background-size: 100% 100%;
      position: absolute;
      right: .25rem;
      top: 50%;
      margin-top: 2.75rem;
      z-index: 100;
      .animation(pull_right 1.1s infinite linear);
    }
    .t2016 {
      position: absolute;
      width: .45rem;
      height: 2.27rem;
      left: .3rem;
      top: .4rem;
      z-index: 20;
      .animation(flip .75s 0s both);
    }
    .tpage {
      position: absolute;
      width: .59rem;
      height: 1.17rem;
      right: .3rem;
      z-index: 20;
      top: .6rem;
      .transition(all 0.5s ease);
      &.flipFn {
        // .animation(flip .75s .72s both);
        .animation(flip .75s 0s both);
      }
      &.tnow1 {
        background: url("../img/preload/20161.png");
        background-size: 100% 100%;
      }
      &.tnow2 {
        background: url("../img/preload/20162.png");
        background-size: 100% 100%;
      }
      &.tnow3 {
        background: url("../img/preload/20163.png");
        background-size: 100% 100%;
      }
      &.tnow4 {
        background: url("../img/preload/20164.png");
        background-size: 100% 100%;
      }
      &.tnow5 {
        background: url("../img/preload/20165.png");
        background-size: 100% 100%;
      }
      &.tnow6 {
        background: url("../img/preload/20166.png");
        background-size: 100% 100%;
      }
      &.tnow7 {
        background: url("../img/preload/20167.png");
        background-size: 100% 100%;
      }
      &.tnow8 {
        background: url("../img/preload/20168.png");
        background-size: 100% 100%;
      }
    }
    .music {
      width: .66rem;
      height: .66rem;
      background: url("../img/preload/musicO.png");
      background-size: 100% 100%;
      position: absolute;
      right: .25rem;
      bottom: .35rem;
      z-index: 20;
      &.muClose {
        background: url("../img/preload/musicC.png");
        background-size: 100% 100%;
      }
    }
  }
  .sp0 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/p0/bg0.jpg");
    background-size: cover;
    .p0r1 {
      position: absolute;
      width: 2.40rem;
      height: 3.70rem;
      left: 50%;
      top: 6.47rem;
      z-index: 5;
      margin-left: -3.65rem;
    }
    .p0r2 {
      position: absolute;
      width: 4.06rem;
      height: 5.04rem;
      left: 50%;
      top: 6.52rem;
      z-index: 8;
      margin-left: -2.45rem;
    }
    .p0r3 {
      position: absolute;
      width: 3.84rem;
      height: 4.26rem;
      top: 6.41rem;
      left: 50%;
      z-index: 7;
      margin-left: -1.72rem;
    }
    .p0r4 {
      position: absolute;
      width: 2.74rem;
      height: 3.40rem;
      left: 50%;
      top: 6.71rem;
      z-index: 6;
      margin-left: .85rem;
    }
    .p0text1 {
      position: absolute;
      width: 3.63rem;
      height: 8.57rem;
      left: 50%;
      top: 0;
      z-index: 3;
      margin-left: -1.75rem;
    }

    .p0yun1 {
      position: absolute;
      width: 3.72rem;
      height: 1.63rem;
      left: -0.2rem;
      top: 2.15rem;
      z-index: 1;
    }
    .p0yun2 {
      position: absolute;
      width: 4.01rem;
      height: 1.74rem;
      left: 50%;
      top: 4.85rem;
      z-index: 1;
    }
    .p0yun3 {
      position: absolute;
      width: 3.81rem;
      height: 1.09rem;
      left: 0;
      top: 6.53rem;
      z-index: 1;
    }

    .p0yys{
      position: absolute;
      width: .67rem;
      height: 2.29rem;
      left: 50%;
      top: 1.65rem;
      z-index: 2;
      margin-left: 2.15rem;
    }
    .p02016{
      position: absolute;
      width: .45rem;
      height: 2.27rem;
      left: 50%;
      top: 4.08rem;
      z-index: 2;
      margin-left: -2.5rem;
    }

    &.active {
      .p0r1 {
        will-change: transform;
        .animation(fadeInUp .75s .72s both);
      }
      .p0r2 {
        will-change: transform;
        .animation(fadeInUp .64s .98s both);
      }
      .p0r3 {
        will-change: transform;
        .animation(fadeInUp .72s 1.22s both);
      }
      .p0r4 {
        will-change: transform;
        .animation(fadeInUp .78s 1.45s both);
      }
      .p0text1 {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }

      .p0yun1{
        .animation(fadeInRight .75s 1.57s both);
      }
      .p0yun2{
        .animation(fadeInLeft .75s 1.52s both);
      }
      .p0yun3{
        .animation(fadeInRight .75s 1.63s both);
      }

      .p0yys{
        .animation(fadeInDown .75s .72s both);
      }
      .p02016{
        .animation(fadeInDown .75s .72s both);
      }

    }
  }
  .sp1 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p1r1 {
      position: absolute;
      width: 4.40rem;
      height: 7.49rem;
      left: 1.95rem;
      top: .2rem;
      z-index: 4;
    }
    .p1shan {
      position: absolute;
      width: 6.58rem;
      height: 3.63rem;
      left: .58rem;
      top: 3.3rem;
      z-index: 1;
    }
    .p1text {
      position: absolute;
      width: 5.79rem;
      height: 1.74rem;
      left: 50%;
      margin-left: -2.9rem;
      bottom: .6rem;
      z-index: 6;
    }
    .p1yun1 {
      position: absolute;
      width: 5.65rem;
      height: 2.87rem;
      left: 1.7rem;
      top: 0;
      z-index: 1;
    }
    .p1yun2 {
      position: absolute;
      width: 182/100rem;
      height: 166/100rem;
      left: 0;
      top: 3.85rem;
      z-index: 3;
    }
    .p1yun3 {
      position: absolute;
      width: 223/100rem;
      height: 96/100rem;
      right: 0;
      top: 5.5rem;
      z-index: 3;
    }
    .p1num {
      position: absolute;
      width: 6.17rem;
      height: 3rem;
      left: 50%;
      margin-left: -3.05rem;
      bottom: .9rem;
      z-index: 6;
    }
    &.active {
      .p1r1 {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }
      .p1shan {
        .animation(fadeInUp .65s .8s both);
      }
      .p1yun1 {
        .animation(fadeInDown .75s .72s both);
      }
      .p1yun2 {
        .animation(fadeInRight .75s .72s both);
      }
      .p1yun3 {
        .animation(fadeInLeft .75s .72s both);
      }
      .p1num {
        .animation(fadeInUp .68s 1.35s both);
      }
    }
  }
  .sp2 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p2moon {
      position: absolute;
      width: 5.82rem;
      height: 5.82rem;
      left: 50%;
      margin-left: -2.9rem;
      top: .75rem;
      z-index: 1;
    }
    .p2role {
      position: absolute;
      width: 6.75rem;
      height: 7.93rem;
      left: 50%;
      margin-left: -3.6rem;
      top: .2rem;
      z-index: 5;
    }
    .p2text1 {
      position: absolute;
      width: 210/100rem;
      height: 312/100rem;
      left: .7rem;
      bottom: .75rem;
      z-index: 6;
    }
    .p2text2 {
      position: absolute;
      width: 387/100rem;
      height: 298/100rem;
      left: 3.1rem;
      bottom: .8rem;
      z-index: 6;
    }
    .p2yun1 {
      position: absolute;
      width: 3.21rem;
      height: 1.85rem;
      right: 0;
      top: 1rem;
      z-index: 3;
    }
    .p2yun2 {
      position: absolute;
      width: 2.57rem;
      height: .96rem;
      left: 0;
      top: 3.65rem;
      z-index: 3;
    }
    .arrowsp2{
      width: .31rem;
      height: .36rem;
      background: url("../img/preload/arrow.png");
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 101;
    }
    &.active {
      .p2moon {
        .animation(fadeInUp .75s .72s both);
      }
      .p2yun1 {
        .animation(fadeInLeft .75s .72s both);
      }
      .p2yun2 {
        .animation(fadeInRight .75s .72s both);
      }
      .p2role {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }
      .p2text1 {
        .animation(fadeInRight .75s 1.25s both);
      }
      .p2text2 {
        .animation(fadeInLeft .75s 1.25s both);
      }

    }
  }
  .sp3 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    #three-sp {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 100%;
          &.swiper-slide-active {
          }
        }
      }
      .swiper-pagination.swiper-pagination-bullets {
        bottom: .8rem;
        span {
          width: .13rem;
          height: .13rem;
          border: .03rem solid #000;
          border-radius: 100%;
          background: #000;
          opacity: 1;
          &.swiper-pagination-bullet-active {
            background: #fff;
            opacity: 1;
          }
        }
      }
    }
    .p3r1 {
      position: absolute;
      width: 581/100rem;
      height: 410/100rem;
      left: 50%;
      margin-left: -2.9rem;
      top: 2.6rem;
      z-index: 3;
    }
    .p3bg1 {
      position: absolute;
      width: 5.12rem;
      height: 3.73rem;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .p3t1 {
      position: absolute;
      width: 5.03rem;
      height: 3.12rem;
      left: 50%;
      margin-left: -2.5rem;
      bottom: 1.7rem;
      z-index: 7;
    }
    .p3yun1 {
      position: absolute;
      width: 350/100rem;
      height: 126/100rem;
      left: 0;
      top: 3.22rem;
      z-index: 2;
    }
    .p3yun2 {
      position: absolute;
      width: 251/100rem;
      height: 91/100rem;
      right: 0;
      top: 6.2rem;
      z-index: 4;
    }
    .p3bg2 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .p3r2 {
      position: absolute;
      width: 6.56rem;
      height: 4.96rem;
      left: 50%;
      margin-left: -3.28rem;
      top: 2rem;
      z-index: 3;
    }
    .p3t2 {
      position: absolute;
      width: 5.61rem;
      height: 2.22rem;
      left: 50%;
      margin-left: -2.8rem;
      bottom: 2.2rem;
      z-index: 6;
    }
    .p3yun3 {
      position: absolute;
      width: 2.5rem;
      height: 1.26rem;
      right: 0;
      top: 2.95rem;
      z-index: 2;
    }
    .p3yun4 {
      position: absolute;
      width: 1.58rem;
      height: .96rem;
      left: 0;
      top: 6.2rem;
      z-index: 5;
    }
    &.active {
      .p3bg1 {
        .animation(fadeIn .75s .45s both);
      }
      .p3bg2 {
        .animation(fadeIn .75s .52s both);
      }
      .p3t1 {
        .animation(fadeInUp .75s .45s both);
      }
      .p3yun1 {
        .animation(fadeIn .75s .52s both);
      }
      .p3yun2 {
        .animation(yunFade .75s .52s both);
      }
      .p3t2 {
        .animation(fadeInUp .68s 1.35s both);
      }
      .p3yun3 {
        .animation(fadeIn .68s 1.50s both);
      }
      .p3yun4 {
        .animation(yunFade .68s 1.65s both);
      }
      .p3r1 {
        .animation(fadeInDown .65s .65s both);
      }
      .p3r2 {
        .animation(fadeInUp .65s .65s both);
      }

    }
  }
  .sp4 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    #four-sp {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 100%;
          &.swiper-slide-active {
          }
        }
      }
      .swiper-pagination.swiper-pagination-bullets {
        bottom: .8rem;
        span {
          width: .13rem;
          height: .13rem;
          border: .03rem solid #000;
          border-radius: 100%;
          background: #000;
          opacity: 1;
          &.swiper-pagination-bullet-active {
            background: #fff;
            opacity: 1;
          }
        }
      }
    }
    .p4r1 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: .9rem;
      z-index: 3;
    }
    .p4st1 {
      position: absolute;
      width: 462/100rem;
      height: 131/100rem;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .p4st2 {
      position: absolute;
      width: 298/100rem;
      height: 156/100rem;
      left: 0;
      top: 3rem;
      z-index: 1;
    }
    .p4t1 {
      position: absolute;
      width: 5.74rem;
      height: 2.21rem;
      left: 50%;
      margin-left: -2.87rem;
      bottom: 2.4rem;
      z-index: 7;
    }
    .p4t2 {
      position: absolute;
      width: 5.37rem;
      height: .87rem;
      left: 50%;
      margin-left: -2.68rem;
      bottom: 1.3rem;
      z-index: 7;
    }
    .p4yun {
      position: absolute;
      width: 1.95rem;
      height: .91rem;
      right: 0;
      top: 2rem;
      z-index: 1;
    }
    .p4bg2 {
      position: absolute;
      width: 6.64rem;
      height: 1.88rem;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .p4r2 {
      position: absolute;
      width: 6.42rem;
      height: 6.32rem;
      left: 50%;
      margin-left: -3.21rem;
      top: 2.4rem;
      z-index: 2;
    }
    .p4t3 {
      position: absolute;
      width: 4.58rem;
      height: 1.35rem;
      left: 50%;
      margin-left: -2.3rem;
      bottom: 1.4rem;
      z-index: 6;
    }
    .p4r3 {
      position: absolute;
      width: 4.94rem;
      height: 3.77rem;
      right: 0;
      top: .7rem;
      z-index: 1;
    }
    .p4r4 {
      position: absolute;
      width: 7.03rem;
      height: 6.05rem;
      left: 50%;
      margin-left: -3.5rem;
      top: 1.1rem;
      z-index: 3;
    }
    .p4t4 {
      position: absolute;
      width: 3.87rem;
      height: 2.87rem;
      left: 50%;
      margin-left: -3rem;
      bottom: 1.45rem;
      z-index: 6;
    }

    &.active {
      .p4r1 {
        will-change: transform;
        .animation(fadeInDown .65s .67s both);
      }
      .p4r2 {
        will-change: transform;
        .animation(fadeInDown .65s .67s both);
      }
      .p4r3 {
        will-change: transform;
        .animation(fadeInLeft .65s .67s both);
      }
      .p4r4 {
        will-change: transform;
        .animation(fadeInDown .65s .67s both);
      }
      .p4st1 {
        .animation(fadeIn .75s .45s both);
      }
      .p4st2 {
        .animation(fadeInRight .75s .52s both);
      }
      .p4bg2 {
        .animation(fadeIn .75s .52s both);
      }
      .p4yun {
        .animation(fadeInLeft .68s .58s both);
      }
      .p4t1 {
        .animation(fadeInUp .75s 1.1s both);
      }
      .p4t2 {
        .animation(fadeInUp .68s 1.25s both);
      }
      .p4t3 {
        .animation(fadeInUp .68s 1.25s both);
      }
      .p4t4 {
        .animation(fadeInUp .68s 1.25s both);
      }
    }
  }
  .sp5 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    #five-sp {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 100%;
          &.swiper-slide-active {
          }
        }
      }
      .swiper-pagination.swiper-pagination-bullets {
        bottom: .8rem;
        span {
          width: .13rem;
          height: .13rem;
          border: .03rem solid #000;
          border-radius: 100%;
          background: #000;
          opacity: 1;
          &.swiper-pagination-bullet-active {
            background: #fff;
            opacity: 1;
          }
        }
      }
    }
    .p5r1 {
      position: absolute;
      width: 5.68rem;
      height: 6.91rem;
      left: 1.15rem;
      top: .27rem;
      z-index: 3;
    }
    .p5r2 {
      position: absolute;
      width: 6.42rem;
      height: 3.92rem;
      left: .56rem;
      top: 3rem;
      z-index: 3;
    }
    .p5bg1 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .p5bg2 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .p5t1 {
      position: absolute;
      width: 6.17rem;
      height: 1.57rem;
      left: 50%;
      margin-left: -3.085rem;
      bottom: 2.69rem;
      z-index: 7;
    }
    .p5ios {
      position: absolute;
      width: 5.14rem;
      height: .72rem;
      left: 50%;
      margin-left: -3.065rem;
      bottom: 1.63rem;
      z-index: 7;
    }
    .p5spt {
      position: absolute;
      width: 3.32rem;
      height: 1.04rem;
      left: 50%;
      margin-left: -3.1rem;
      bottom: 1.28rem;
      z-index: 7;
    }
    &.active {
      .p5r1, .p5r2 {
        will-change: transform;
        .animation(fadeInDown .65s .47s both);
      }
      .p5bg1, .p5bg2 {
        .animation(fadeIn .65s .35s both);
      }
      .p5t1 {
        .animation(fadeInUp .75s 1s both);
      }
      .p5ios, .p5spt {
        .animation(fadeInUp .68s 1.15s both);
      }
    }
  }
  .sp6 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p6bolang {
      position: absolute;
      width: 617/100rem;
      height: 12/100rem;
      left: 50%;
      margin-left: -3.08rem;
      bottom: 3.2rem;
      z-index: 6;
    }
    .p6r1 {
      position: absolute;
      width: 5.69rem;
      height: 8.53rem;
      left: 50%;
      margin-left: -2.5rem;
      top: 1.29rem;
      z-index: 3;
    }
    .p6t1 {
      position: absolute;
      width: 2.2rem;
      height: 1.24rem;
      left: 50%;
      margin-left: -3.3rem;
      top: 6.2rem;
      z-index: 4;
    }
    .p6t2 {
      position: absolute;
      width: 2.49rem;
      height: 2.22rem;
      left: 50%;
      margin-left: -2.68rem;
      top: .4rem;
      z-index: 4;
    }
    .p6t3 {
      position: absolute;
      width: 4.36rem;
      height: 1.1rem;
      left: 50%;
      margin-left: -2.18rem;
      top: 9.9rem;
      z-index: 4;
    }
    .p6l1{
      width: .98rem;
      height: 2.14rem;
      position: absolute;
      top: 7.65rem;
      left: 50%;
      z-index: 4;
      margin-left: -2.35rem;
    }
    .p6l2{
      width: 2.06rem;
      height: 2.22rem;
      position: absolute;
      top: 1.24rem;
      left: 50%;
      z-index: 4;
      margin-left: .25rem;
    }
    .p6yun1 {
      position: absolute;
      width: 2.3rem;
      height: 1.43rem;
      right: 0;
      top: 1.2rem;
      z-index: 7;
    }
    .p6yun2 {
      position: absolute;
      width: 2.12rem;
      height: 1.51rem;
      left: 0;
      top: 3.3rem;
      z-index: 7;
    }
    .p6yun3 {
      position: absolute;
      width: 1.89rem;
      height: 1.54rem;
      right: 0;
      top: 7.8rem;
      z-index: 7;
    }
    &.active {
      .p6r1 {
        will-change: transform;
        .animation(fadeInDown .65s .47s both);
      }
      .p6yun1 {
        .animation(fadeInLeft .75s .45s both);
      }
      .p6yun2 {
        .animation(fadeInRight .75s .52s both);
      }
      .p6yun3 {
        .animation(fadeInLeft .45s .52s both);
      }
      /*按着页面顺序执行*/
      .p6t2 {
        .animation(fadeIn  .75s .75s both);
      }
      .p6l2 {
        .animation(fadeIn .75s .95s both);
      }
      .p6t1 {
        .animation(fadeIn .75s 1.15s both);
      }
      .p6l1 {
        .animation(fadeIn .75s 1.35s both);
      }
      .p6t3 {
        .animation(fadeIn .65s 1.55s both);
      }
    }
  }
  .sp7 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    #seven-sp {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 100%;
          &.swiper-slide-active {
          }
        }
      }
      .swiper-pagination.swiper-pagination-bullets {
        bottom: .7rem;
        span {
          width: .13rem;
          height: .13rem;
          border: .03rem solid #000;
          border-radius: 100%;
          background: #000;
          opacity: 1;
          &.swiper-pagination-bullet-active {
            background: #fff;
            opacity: 1;
          }
        }
      }
    }
    .p7bg1 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: .6rem;
      z-index: 1;
    }
    .p7r1 {
      position: absolute;
      width: 7.07rem;
      height: 6.22rem;
      right: .1rem;
      top: 2rem;
      z-index: 2;
    }
    .p7t1 {
      position: absolute;
      width: 5.52rem;
      height: 1.91rem;
      left: 50%;
      margin-left: -2.75rem;
      bottom: 1.4rem;
      z-index: 3;
    }
    .p7bg2 {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0;
      top: .3rem;
      z-index: 1;
    }
    .p7r2 {
      position: absolute;
      width: 6.93rem;
      height: 6.31rem;
      left: 50%;
      margin-left: -3.465rem;
      top: .4rem;
      z-index: 2;
    }
    .p7t2 {
      position: absolute;
      width: 5.86rem;
      height: 4.77rem;
      left: 50%;
      margin-left: -2.93rem;
      bottom: 1.2rem;
      z-index: 7;
    }
    .p7yun1 {
      position: absolute;
      width: 3.06rem;
      height: 2.20rem;
      right: 0;
      top: 4.2rem;
      z-index: 2;
    }
    .p7yun2 {
      position: absolute;
      width: 1.97rem;
      height: 1.47rem;
      left: 0;
      top: 4.2rem;
      z-index: 3;
    }

    &.active {
      .p7r1 {
        will-change: transform;
        .animation(fadeInDown .75s .62s both);
      }
      .p7t1 {
        .animation(fadeInUp .75s 1.15s both);
      }
      .p7bg1 {
        .animation(fadeInUp .75s .62s both);
      }
      .p7r2 {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }
      .p7t2 {
        .animation(fadeInUp .75s 1.25s both);
      }
      .p7bg2 {
        .animation(fadeInUp .75s .72s both);
      }
      .p7yun2 {
        .animation(yunFade .75s 1.25s both);
      }
      .p7yun1 {
        .animation(fadeIn .75s 1.25s both);
      }
    }
  }
  .sp8 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p8cloud {
      width: 6.44rem;
      height: 5.52rem;
      position: absolute;
      top: 2.72rem;
      right: 0;
      z-index: 1;
    }
    .p8lv1 {
      width: .74rem;
      height: .89rem;
      position: absolute;
      top: 7.78rem;
      left: .15rem;
      z-index: 2;
    }
    .p8lv2 {
      width: 1.20rem;
      height: 1.39rem;
      position: absolute;
      top: 2.34rem;
      right: 0;
      z-index: 2;
    }
    .p8lv3 {
      width: .85rem;
      height: .68rem;
      position: absolute;
      top: 7.9rem;
      left: 2.5rem;
      z-index: 2;
    }
    .p8f1 {
      width: 5.51rem;
      height: 1.75rem;
      position: absolute;
      top: 4.46rem;
      left: 1.31rem;
      z-index: 3;
    }
    &.active {
      .p8cloud {
        .animation(fadeInDown .75s .45s both);
      }
      .p8f1 {
        .animation(fadeInUp .75s .45s both);
      }
      .p8lv1 {
        .animation(p8lv1 2.95s .75s both);
      }
      .p8lv2 {
        .animation(p8lv1 2.25s .75s both);
      }
      .p8lv3 {
        .animation(p8lv1 3.25s .25s both);
      }
    }
  }
  .sp9 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p8f2 {
      width: 1.77rem;
      height: .36rem;
      position: absolute;
      top: 0.46rem;
      left: 50%;
      z-index: 3;
      margin-left: -.885rem;
    }
    .p8r1 {
      position: absolute;
      width: 667/100rem;
      height: 1023/100rem;
      left: 50%;
      margin-left: -3.335rem;
      top: 1rem;
      z-index: 2;
    }
    .p8t1 {
      position: absolute;
      width: 1.51rem;
      height: 1.24rem;
      left: 50%;
      margin-left: 1.92rem;
      top: 2.15rem;
      z-index: 3;
    }
    .p8t2 {
      position: absolute;
      width: 1.50rem;
      height: 1.25rem;
      left: 50%;
      margin-left: -3.4rem;
      top: 2.6rem;
      z-index: 4;
    }
    .p8t3 {
      position: absolute;
      width: 1.59rem;
      height: 1.17rem;
      left: 50%;
      margin-left: 2.08rem;
      top: 5.5rem;
      z-index: 4;
    }
    .p8t4 {
      position: absolute;
      width: 1.45rem;
      height: 1.24rem;
      left: 50%;
      margin-left: -3rem;
      top: 9.3rem;
      z-index: 4;
    }
    &.active {
      .p8f2{
        .animation(fadeScale .75s 1.2s both);
      }
      .p8r1 {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }
      .p8t1 {
        .animation(fadeInDown .75s 2s both);
      }
      .p8t2 {
        .animation(fadeInDown .75s 2.5s both);
      }
      .p8t3 {
        .animation(fadeInUp .75s 3s both);
      }
      .p8t4 {
        .animation(fadeInUp .75s 3.5s both);
      }
    }
  }
  .sp10 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p8r2 {
      position: absolute;
      width: 729/100rem;
      height: 865/100rem;
      left: 50%;
      margin-left: -3.645rem;
      top: 1.45rem;
      z-index: 2;
    }
    .p8t5 {
      position: absolute;
      width: 1.73rem;
      height: 1.31rem;
      left: 50%;
      margin-left: -2.68rem;
      top: .44rem;
      z-index: 3;
    }
    .p8t6 {
      position: absolute;
      width: 2.44rem;
      height: 1.37rem;
      left: 50%;
      margin-left: 1.15rem;
      top: 1.83rem;
      z-index: 4;
    }
    .p8t7 {
      position: absolute;
      width: 1.96rem;
      height: 1.58rem;
      left: 50%;
      margin-left: -3.18rem;
      top: 7.68rem;
      z-index: 4;
    }
    .p8t8 {
      position: absolute;
      width: 1.94rem;
      height: 1.52rem;
      left: 50%;
      margin-left: 1.45rem;
      top: 8.63rem;
      z-index: 4;
    }
    .p8t9 {
      position: absolute;
      width: 3.69rem;
      height: .3rem;
      left: 50%;
      margin-left: -1.845rem;
      top: 10.35rem;
      z-index: 4;
    }
    &.active {
      .p8r2 {
        will-change: transform;
        .animation(fadeInDown .75s .72s both);
      }
      .p8t5 {
        .animation(fadeInDown .75s 1.25s both);
      }
      .p8t6 {
        .animation(fadeInDown .75s 2s both);
      }
      .p8t7 {
        .animation(fadeInUp .75s 2.3s both);
      }
      .p8t8 {
        .animation(fadeInUp .75s 2.8s both);
      }
      .p8t9 {
        .animation(fadeIn .75s 3.2s both);
      }
    }
  }
  .sp11 {
    width: 100%;
    height: 100%;
    background: url("../img/preload/bg1.jpg");
    background-size: cover;
    .p9r1 {
      position: absolute;
      width: 7.52rem;
      height: 5.13rem;
      left: 50%;
      margin-left: -3.78rem;
      top: 2.1rem;
      z-index: 3;
    }
    .p9bg {
      position: absolute;
      width: 100%;
      height: 4.12rem;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .p9t1 {
      position: absolute;
      width: 3.58rem;
      height: 1.49rem;
      left: 50%;
      margin-left: -1.79rem;
      top: 7.84rem;
      z-index: 7;
    }
    .p9dow {
      width: 2.08rem;
      height: .68rem;
      position: absolute;
      left: 50%;
      margin-left: -1.09rem;
      top: 9.98rem;
      z-index: 8;
      background: url("../img/p9/p9dow.png");
      background-size: 100% 100%;
    }

    &.active {
      .p9r1 {
        will-change: transform;
        .animation(fadeInDown .65s .65s both);
      }
      .p9bg {
        .animation(fadeIn .75s .45s both);
      }
      .p9t1 {
        .animation(fadeInUp .75s 1.1s both);
      }
      .p9dow {
        .animation(fadeInUp .75s 1.6s both);
      }
    }
  }
}

.keyframes(fadeIn, { 0% {
  .opacity(0);
} 100% {
    .opacity(100);
  } });

/*向上渐显*/
.keyframes(fadeInUp, { 0% {
  .translate3d(0, 100%, 0);
  .opacity(0);
} 100% {
    .translate3d(0, 0, 0);
    .opacity(100);
  } });

/*向下渐显*/
.keyframes(fadeInDown, { 0% {
  .translate3d(0, -100%, 0);
  .opacity(0);
} 100% {
    .translate3d(0, 0, 0);
    .opacity(100);
  } });

/*向左渐显*/
.keyframes(fadeInLeft, { 0% {
  .translate3d(100%, 0, 0);
  .opacity(0);
} 100% {
    .translate3d(0, 0, 0);
    .opacity(100);
  } });

/*向右渐显*/
.keyframes(fadeInRight, { 0% {
  .translate3d(-100%, 0, 0);
  .opacity(0);
} 100% {
    .translate3d(0, 0, 0);
    .opacity(100);
  } });

/*渐变放大*/
.keyframes(fadeScale, { 0% {
  .scale(0);
  .opacity(0);
} 100% {
    .scale(1);
    .opacity(100);
  } });

/*3D翻转*/
@-webkit-keyframes flip {
  from {
    .transform(perspective(400px) rotate3d(0, 1, 0, -360deg));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    .transform(perspective(400px) scale3d(.95, .95, .95));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    .transform(perspective(400px));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    .transform(perspective(400px) rotate3d(0, 1, 0, -360deg));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    .transform(perspective(400px) scale3d(.95, .95, .95));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    .transform(perspective(400px));
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.keyframes(pull_down, { 0% {
  .translate3d(0, -.15rem, 0)
} 50% {
    .translate3d(0, 0, 0)
  } 100% {
      .translate3d(0, -.15rem, 0)
    } });

.keyframes(pull_right, { 0% {
  .translate3d(-.15rem, 0, 0)
} 50% {
    .translate3d(0, 0, 0)
  } 100% {
      .translate3d(-.15rem, 0, 0)
    } });

.keyframes(yunFade, { 0% {
  .opacity(0);
  .translate3d(0, 0, 0)
} 100% {
    .opacity(100);
    .translate3d(0, 0, 0)
  } });

.keyframes(p8lv1, { 0% {
  .transform(scale(-1.1) rotate(72deg) translate3d(7.5rem, 0, 0));
} 100% {
    .transform(scale(-1.1) rotate(68deg) translate3d(0, 0, 0));
  } });

#ft {
  height: 1rem;
}

#siteBottom {
  height: 3.8rem;
  position: relative;
  z-index: 100;
}

.Gpu_up {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}